<template>
	<view class="container">
		<view class="index-top" :style="{backgroundImage:`url(${indexhomeindex.background_image})`}">
			<!-- 头部导航 -->
			<view class="u-f-ac index-icon">
				<view class="u-f-ac index-left-icon" @click="navToRuter(search_bar.left.route)">
					<image :src="search_bar.left_icon" mode="widthFix" lazy-load></image>
				</view>
				<view class="u-f-ac index-right-icon">
					<image :src="items.path" mode="widthFix" lazy-load @click="navToRuter(items.route)" v-for="(items,index) in search_bar.list"></image>
				</view>
			</view>
			
			<!-- 搜索栏 -->
			<view class="search-input">
				<input class="uni-input" placeholder="搜索内容" disabled placeholder-class="icon iconfont icon-sousuo topic-search" @click="searchgoods()"/>
			</view>
			
			<!-- 顶部菜单导航 -->
			<swiperTabHeader :tabBars="tabBars" @changeTab='changeTab' :tabIndex="tabIndex" @getIndexcateGoodslist="getIndexcateGoodslist"></swiperTabHeader>
			
		</view>
		<view class="top-zhiding"></view>
		
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabIndex" @change="tabchangegoods_cate">
				<swiper-item v-for="(items,index) in tabBars" :key="index">
					
					<!-- 图文列表 -->
					<scroll-view scroll-y class="list"  @scrolltolower="loadfuncmore()" v-if='index == 0'>	
						<indexList :item="indexhomeindex" :index="index" :pidindex="items.category_id"></indexList>
						<!-- 顶部功能区 -->
						<view class="func">
							<view class="func-swiper-bar">
								<swiperTabFunc :functabBars="indexhomeindex.func" :funcIndexbar="funcIndex" @functabtap="functabtap"></swiperTabFunc>
							</view>
							
							<view class="uni-tab-bar">
								<swiper class="swiper-box" :style="{height:funcswiperheight+'px'}" :current="funcIndex" @change="tabChangefunc">
									<swiper-item v-for="(items,index) in indexhomeindex.func" :key="index">
										<scroll-view class="list">
											<view v-if="typeof indexhomeindex.func_goods != 'undefined'">
												<funcIndexList :item="indexhomeindex.func_goods" :index="index"></funcIndexList>
												<!--下拉加载更多-->
												<uni-load-more :status="loadingType"></uni-load-more>
											</view>
										</scroll-view>
									</swiper-item>
								</swiper>
							</view>
						</view>
						<!-- 顶部功能区结束区域 -->
					</scroll-view>
					
					
					
					
					<scroll-view scroll-y class="list" @scrolltolower="loadgoodslistmore(items.category_id)" v-else>						
						<indexList :item="goods_cate" :index="index" :pidindex="items.category_id" @getorderbylistgoods="getorderbylistgoods($event)"></indexList>
						<!--下拉加载更多-->
						<uni-load-more :status="loadingType"></uni-load-more>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>		
		
	</view>
</template>

<script>
	import swiperTabHeader from "../../components/index/swiper-tab-header"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more'
	import apiindex from '../../common/api/index'
	import indexList from "../../components/index/index-list"
	import funcIndexList from "../../components/index/func-index-list"
	import swiperTabFunc from "../../components/index/swiper-tab-func"
	export default {
		data() {
			return {
				loadingType:'loading',
				swiperheight:300,//高度
				funcswiperheight:300,
				tabIndex:0,// 选中的
				tabBars:[],	
				
				funcIndex:0,//功能区选中的
				funcpage:1,//功能区翻页
				
				search_bar:{},	//头部搜索
				indexhomeindex:{
					background_image:'',
					carousel_background_image:'',
					menu_background_image:'',
					menu:[],		//菜单
					ad:[],			//广告
					ad1:[],			//广告1
					ad2:[],			//广告2
					carousel:[],	//轮播图1
					carousel1:[],	//轮播图2
					func:[],		//功能区
					func_goods:[],	//功能区商品
				},
				
				//商品列表
				goods_cate:{
					goods_bar:[],
					goods_list:[],
				},
				goods_page:1,
				
				params:{
					site:'haodanku',
					page:this.goods_page,
					coupon:1,
					sort:'desc',
					order_by:'',
					category_id:1,
				},
				cateid:1,
			}
		},
		components:{
			swiperTabHeader,
			indexList,
			swiperTabFunc,
			funcIndexList,
			uniLoadMore,
		},		
		onShow(){
			this.getlistHeight()
			this.getcategory()	//首页头部分类
		},
		onNavigationBarSearchInputClicked(){
			//监听搜索框点击事件
			uni.navigateTo({
				url:"/pages/search/search"
			})
		},
		onNavigationBarButtonTap(e){
			// 监听原生标题导航按钮事件
			switch(e.index){
				case 1:
					uni.navigateTo({
						url:"/pages/add-input/add-input"
					})
					break;
			}
		},
		
		methods: {
			
			getlistHeight(){
				let screen = uni.getSystemInfoSync()
				this.swiperheight=screen.screenHeight
			},
			
			/**
			 * 获取头部分类
			 */
			getcategory(){
				//商品分类
				apiindex.goodsCategory({}).then(cateres =>{
					this.tabBars=cateres.data;
					this.homeindex();	//首页结构
				}).catch(cateres =>{
					
				});
			},
			
			
			homeindex(){
				//加载首页结构
				setTimeout(()=>{
					//首页结构
					apiindex.homeindex({}).then(res => {
						//商品列表
						this.productlist(res.data.func[0].route);
						this.indexhomeindex.background_image=res.data.background_image
						this.indexhomeindex.carousel_background_image = res.data.carousel_background_image
						this.indexhomeindex.menu_background_image = res.data.menu_background_image
						this.indexhomeindex.func=res.data.func;	
						this.search_bar=res.data.search_bar;
						this.indexhomeindex.menu=res.data.menu;
						this.indexhomeindex.ad=res.data.ad;
						this.indexhomeindex.ad1=res.data.ad1;
						this.indexhomeindex.ad2=res.data.ad2;
						this.indexhomeindex.carousel=res.data.carousel;
						this.indexhomeindex.carousel1=res.data.carousel1;
						uni.stopPullDownRefresh();  //停止下拉刷新动画
					}).catch(res => {
					　　// 失败进行的操作
					});
				},2000);
			},
			
			//获取商品列表，功能区的
			productlist(params){
				let productlist_params=JSON.parse(params.data);
				apiindex.productlist(productlist_params).then(prores =>{
					this.indexhomeindex.func_goods=prores.data;
					this.funcswiperheight = prores.data.length*150 +50
				}).catch(prores =>{
					
				});
			},
			
			//获取分类头部菜单和列表
			getIndexcateGoodslist(index,cate_id){
				this.tabIndex = parseInt(index);
				if(this.tabIndex != 0 || cate_id != -1){
					this.params.category_id=cate_id
					this.getHaodankuCate(cate_id);
					this.goods_list(this.params)
				}
			},
			
			
			//点击获取首页栏目下面的分类数据
			getHaodankuCate(cat_id){
				let cate_params={cat_id:cat_id};
				apiindex.categoryHaodanke_index(cate_params).then(prores =>{
					this.goods_cate.goods_bar=prores.data;
				}).catch(prores =>{
					
				});
			},
			
			//获取商品分类列表
			goods_list(){
				this.params.category_id=typeof this.params.category_id == "undefined" ? 1 : this.params.category_id;
				apiindex.goods_list(this.params).then(prores =>{
					this.goods_cate.goods_list=prores.data;
				}).catch(prores =>{
					
				});
				this.goods_page++;
			},
			
			//路由跳转
			navToRuter(route){
				tools.router(route);
			},
					
			// 选择导航栏事件
			changeTab(index){
				this.tabIndex = index
				if(this.tabIndex != 0){
					let cate_id = this.tabBars[this.tabIndex].category_id;
					this.cateid = cate_id
					this.getHaodankuCate(cate_id);
					this.params.category_id=cate_id
					this.params.page=1
					this.goods_cate.goods_bar=[]
					this.goods_cate.goods_list=[]
					this.goods_list(this.params);
				}
			},
			
			//滑动切换导航
			tabchangegoods_cate(e){
				this.tabIndex = e.detail.current;
				if(this.tabIndex != 0){
					let cate_id = this.tabBars[this.tabIndex].category_id;
					this.cateid = cate_id
					this.getHaodankuCate(cate_id);
					this.params.category_id=cate_id
					this.params.page=1
					this.goods_cate.goods_bar=[]
					this.goods_cate.goods_list=[]
					this.goods_list(this.params);
				}
			},
			
			
			
			//功能区接受子组件传过来的值点击切换导航
			functabtap(index,route){
				if(this.funcIndex != index){
					this.productlist(route);
				}
				this.funcIndex = index;
			},
			
			//滑动切换导航
			tabChangefunc(e){
				this.indexhomeindex.func_goods=[];
				this.funcswiperheight = 150
				this.funcIndex = e.detail.current;
				this.productlist(this.indexhomeindex.func[this.funcIndex].route);
			},
			
			//功能下拉区加载商品
			loadfuncmore(){
				let func_router = this.indexhomeindex.func[this.funcIndex].route
				let params=JSON.parse(func_router.data);
				this.funcpage= this.funcpage+1
				params.page=this.funcpage;
				setTimeout(()=>{
					apiindex.productlist(params).then(prores =>{
						//获取数据
						// for(var i=0;i<prores.data.length;i++){
						// 	this.indexhomeindex.func_goods.push(prores.data[i]);
						// }
						let current_func = prores.data.length * 148
						this.funcswiperheight = this.funcswiperheight+current_func
						this.indexhomeindex.func_goods = this.indexhomeindex.func_goods.concat(prores.data);//合并数组
					}).catch(prores =>{
						
					});
					
				},2000);
			},
			
			
			//分类商品上拉加载列表
			loadgoodslistmore(cate_id){
				this.cateid=cate_id
				this.params.page = this.goods_page+1
				setTimeout(()=>{
					this.params.category_id=cate_id;
					apiindex.goods_list(this.params).then(prores =>{
						// for(var i=0;i<prores.data.length;i++){
						// 	this.goods_cate.goods_list.push(prores.data[i]);
						// }
						this.goods_cate.goods_list = this.goods_cate.goods_list.concat(prores.data);
					}).catch(prores =>{
						
					});
				},2000);
			},
			
			//商品排序
			getorderbylistgoods(goods_params){
				switch(goods_params.type){
					case 'sale':
						goods_params.value==1 ? this.params.sort='asc' : this.params.sort='desc'
						this.params.order_by='sale'
					break;
					case 'price':
						goods_params.value==1 ? this.params.sort='asc' : this.params.sort='desc'
						this.params.order_by='price'
					break;
					case 'commission':
						goods_params.value==1 ? this.params.sort='asc' : this.params.sort='desc'
						this.params.order_by='commission'
					break;
					case 'new':
						goods_params.value==1 ? this.params.sort='asc' : this.params.sort='desc'
						this.params.order_by='new'
					break;
				}
				this.params.page=1
				this.goods_list(this.params)
			},
			
			//商品搜索
			searchgoods(){
				uni.navigateTo({
					url:"/pages/search/index"
				})
			},
			
		},
	}
</script>

<style scoped>
	.index-top{
		/* position: absolute;
		width: 100%;
		left: 0;
		right: 0;
		z-index: 1; */
		position:fixed;
		width: 100%;
		left: 0;
		right: 0;
		z-index:1;
		background-size: 100% 100%;
	}
	.top-zhiding{
		display: block;
		height:315upx;
	}
	.index-icon{
		height:100upx;
		display: flex;
        justify-content: space-between;
	}
	.index-left-icon{
		width:20%;
		margin-left:10upx;
	}
	.index-left-icon>image{
		width:120upx;
		height:50upx;
		position:relative;
		top:10upx;
	}
	.index-right-icon{
		width:20%;
	}
	.index-right-icon>image{
		margin-right:20upx;
		width: 70upx;
		height:70upx;
		position:relative;
		top:10upx;
	}
	
	
	.search-input{
		padding: 20upx;
	}
	.search-input input{
		background: #F4F4F4;
		border-radius: 10upx;
	}
	.topic-search{
		display: flex;
		justify-content: center;
		font-size: 27upx;
	}
</style>
